<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件案例</title>
    <script src="../../js/vue3.js"></script>
</head>
<style>
    #app {
        margin: 5rem auto;
        width: 60%;
    }

    table {
        width: 100%;
    }

    table,
    tr,
    td,
    th {
        border: 1px solid gray;
        border-collapse: collapse;
        text-align: center;
    }

    td,
    th {
        padding: 0.5rem;
        width: 8rem;
    }

    tr:nth-child(2) {
        border-top: 1.5px solid gray;
    }

    p {
        font-size: 1.5rem;
    }
</style>

<body>
    <!-- 运行 -->
    <div id="app">
        <table>
            <tr>
                <th>编号</th>
                <th>图书名称</th>
                <th>出版时间</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>     
        </table>
        <son  v-for="(items,indexs) in books" :item="items" :index="indexs" @delete-item="deletes()"></son>
        <h2>总价: ${{sub|fixed}}</h2>
    </div>
    <!-- 模块 -->
    <template id="son">
        <table>
        <tr>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>${{item.price}}</td>
                <td><button @click="add()">+</button> {{item.count}} <button @click="jian()" :disabled="item.count==0">-</button></td>
                <td><button @click="deletes()">移除</button></td>
            </tr>
        </table>
        
    </template>
    <script>
        const v_app = Vue.createApp({
            data() {
                return {
                    books: [{
                        id: 1,
                        name: "《圣兽之王》",
                        date: "2006-1",
                        price: 80,
                        count: 1,
                    }, {
                        id: 2,
                        name: "《星露谷物语》",
                        date: "2006-2",
                        price: 8,
                        count: 0,
                    }, {
                        id: 3,
                        name: "《2042》",
                        date: "2006-3",
                        price: 15,
                        count: 1,
                    }, {
                        id: 4,
                        name: "《女神异闻录5》",
                        date: "2006-4",
                        price: 75,
                        count: 0,
                    }, {
                        id: 5,
                        name: "《植物大战僵尸》",
                        date: "2006-5",
                        price: 6,
                        count: 0,
                    }],
                }
            },
            methods: {
                deletes(id) {
                    this.books.splice(id, 1);
                }
            },
            computed: {
                sub() {
                    let result = 0;
                    for (let i = 0; i < this.books.length; i++) {
                        result = (this.books[i].price * this.books[i].count) + result;
                    }
                    return result;
                }
            },
            filters: {
                fixed(str) {
                    return Number(str).toFixed(2);
                }
            },
            components: {
                son: {
                    template: "#son",
                    props: {
                        item: {
                            type: Object,
                            default: function () {
                                return [

                                ];
                            }
                        },
                        index: Number
                    },
                    data() {
                        return {
                            arr: this.item,
                            id: this.index
                        }
                    },
                    methods: {
                        add() {
                            this.arr.count++;
                        },
                        jian() {
                            this.arr.count--;
                        },
                        deletes() {
                            this.$emit("deleteItem", this.id);
                        }
                    },
                }
            }
        });
        v_app.mount("#app");
    </script>
</body>

</html>